<template>
<el-container class="blog_container">
<el-header>
  <div>
    <img src="../../assets/鸡蛋.png" alt="" class="home_pic">
    <span>eggBlog</span>
  </div>
  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" active-text-color="#409EFF">
    <el-menu-item index="1" @click="tofirstPage()">主页</el-menu-item>
    <el-menu-item index="2">分类</el-menu-item>
    <el-menu-item index="3">个人中心</el-menu-item>
    <el-menu-item index="4" @click="tomanage">管理</el-menu-item>
  </el-menu>
  <div class="home_input">
    <el-col :span="20"  >
       <a-input-search placeholder="SerchBlogs" style="width: 200px" @search="search(inputTitle)" v-model="inputTitle"/>
    </el-col>
  </div>
  <div class="line"></div>
</el-header>
  <el-aside width="250px">
    <div class="blog_aside">
      <div class="author_name">
      <img src="../../assets/头像.jpg" height="50px">
        {{art.author}}
      </div>
    </div>
    <div class="author">
      <dl class="author_information">
        <dl class="text-center" title="406">
          <a href="https://blog.csdn.net/HyperAI" data-report-click="{&quot;mod&quot;:&quot;1598321000_001&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4310&quot;}" data-report-query="t=1">
            <dt><span class="count">406</span></dt>
            <dd class="font" style="margin-left: 15px">原创</dd>
          </a>
        </dl>
        <dl class="text-center" data-report-click="{&quot;mod&quot;:&quot;1598321000_002&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4311&quot;}" title="5129">
          <a href="https://blog.csdn.net/rank/list/weekly" target="_blank">
            <dt><span class="count">{{art.thumbsUp}}</span></dt>
            <dd class="font" style="margin-left: 15px">获赞</dd>
          </a>
        </dl>
        <dl class="text-center" title="7113">
          <a href="https://blog.csdn.net/rank/list/total" data-report-click="{&quot;mod&quot;:&quot;1598321000_003&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4312&quot;}" target="_blank">
            <dt><span class="count">113</span></dt>
            <dd class="font" style="margin-left: 15px">评论</dd>
          </a>
        </dl>
        <dl class="text-center" style="min-width:58px" title="719964">
          <dt><span class="count" >127</span></dt>
          <dd style="margin-left: 15px">收藏</dd>
        </dl>
      </dl>
    </div>

  </el-aside>
  <el-main>
    <div class="article-title-box">
      <h1 class="title-article" id="articleContentId" ><strong v-bind:title="art.title">{{art.title}}</strong></h1>
    </div>
    <div class="blog_thing">
        <div class="bar-content">
          <img class="article-type-img" src="../../assets/标签.png" alt="">
          <a class="follow-nickName " target="_blank" rel="noopener">HyperAI超神经</a>
          <span class="time">{{art.publishTime}}</span>
          <img class="article-read-img article-heard-img" src="../../assets/浏览量.png" alt="">
          <span class="read-count">{{art.thumbsUp}}</span>
          <a id="blog_detail_zk_collection" class="un-collection" data-report-click='{"mod":"popu_823","spm":"1001.2101.3001.4232","ab":"new"}'>
            <img class="article-collect-img article-heard-img un-collect-status isdefault" style="display:inline-block" src="../../assets/收藏.png" alt="">
            <span class="name">收藏 {{ art.thumbsUp }}</span>
          </a>
        </div>
    <div class="blog-tags-box">
      <div class="tags-box artic-tag-box">
        <span class="label">分类专栏：</span>
        <a class="tag-link" href="https://blog.csdn.net/hyperai/category_11075128.html" target="_blank" rel="noopener">{{art.type}}</a>
      </div>
      </div>
    </div>
    <div>
     <markdown-it-vue class="md-body" :content="art.content"/>
    </div>
    <a-tooltip>
    <template slot="title">
      喜欢就点个赞吧
    </template>
   <a-tag :color="color" style="position:relative;right:-400px;top:30px;width:60px" @click="thumbs1(color)">
        {{thumbs}}
      </a-tag>
  </a-tooltip>
    <br>
     <br>

    <!-- 评论 -->
    <el-collapse>
    <el-card v-for="item in this.commentslistfirst" :key="item.id">`
      <div>
        <div style="margin-left: -700px ; margin-top:-20px "><span>{{item.observer_nickName}}:{{item.observe_content}}</span></div>
        <div style="margin-right: -520px">{{item.update_date}}</div>
        <el-card v-for="reply in item.commentsreply" :key="reply.id">
          <div style="margin-left: -600px ; margin-top:-20px "><span>{{item.observer_nickName}}:{{item.observe_content}}</span></div>
          <div style="margin-right: -620px">{{item.update_date}}</div>
        </el-card>
          <el-collapse-item title="回复" @click.native="setLast_id(item.id)">
            <el-input v-model="commentreply" placeholder="请输入内容"></el-input>
            <el-button style="margin-top: 10px" @click="replyCommit('commentreply')" >回复评论</el-button>
          </el-collapse-item>
      </div>
    </el-card>
    </el-collapse>
    <el-input v-model="commentContent" placeholder="请输入内容"></el-input>
    <el-button @click="commentPut('commentContent')">评论</el-button>


<!--    <template>-->
<!--      <div>-->
<!--        <div class="mask" v-if="showModal" @click="showModal=false"></div>-->
<!--        <div class="pop" v-if="showModal">-->
<!--          <button @click="showModal=false" class="btn">点击出现弹框</button>-->
<!--        </div>-->
<!--        <button @click="showModal=true" class="btn">点击出现弹框</button>-->
<!--      </div>-->
<!--    </template>-->


  </el-main>
</el-container>
</template>

<script>
import moment from 'moment';
import MarkdownItVue from 'markdown-it-vue'
import 'markdown-it-vue/dist/markdown-it-vue.css'
export default {
   components: {
    MarkdownItVue
  },
  data() {
    return {
      art:{
        author: '',
        content: '',
        number: '',
        publishTime: '',
        thumbsUp: '',
        title: '',
        type: '',
      },
      inputTitle:'',
      showModal: false,
      comments: [],
      submitting: false,
      value: '',
      moment,
      color:'blue',
      thumbs:'点赞',
      activeIndex:'1',
      blog: [{
        number: '',
        author: '',
        title: '',
        content: '',
        thumbUp: '',
        type: '',
        publishTime: '',
        commentNum: '',
        collectNum: '',
        commentslist: [{
          id: '',
          observer_nickName: '',
          observe_content: '',
          blog_number: '',
          last_id: '',
          is_delete: '',
          creat_date: '',
          update_date: '',
        }]
      }],
      blogonly: {
        number: '',
        author: '',
        title: '',
        content: '',
        thumbUp: '',
        type: '',
        publishTime: '',
        commentNum: '',
        collectNum: '',
        commentslist:[{
          id:'',
          observer_nickName:'',
          observe_content:'',
          blog_number:'',
          last_id:'',
          is_delete:'',
          creat_date:'',
          update_date:'',
        }]
      },
      commentName:'',
      commentContent:'',
      commentBlog:'',
      commentreply:'',
      reply_id:'',
      commentslistfirst:[{
        id:null,
        observer_nickName:null,
        observe_content:null,
        blog_number:null,
        last_id:null,
        is_delete:null,
        creat_date:null,
        update_date:null,
        commentsreply:[{
          id:null,
          observer_nickName:null,
          observe_content:null,
          blog_number:null,
          last_id:null,
          is_delete:null,
          creat_date:null,
          update_date:null,
        }],
      }],
      reply:[{
        id:null,
        observer_nickName:null,
        observe_content:null,
        blog_number:null,
        last_id:null,
        is_delete:null,
        creat_date:null,
        update_date:null,
      }],
    }
  },
  created() {
    this.show()
    //     const _this = this
    // this.$http.get('http://localhost:8081/type/findComment').then(function (resp) {
    //   _this.blog = resp.data
    //   for(var i in _this.blog){
    //     if(_this.blog[i].number.toString()===_this.$route.params.number) {
    //       _this.blogonly = _this.blog[i]
    //       break
    //     }
    //   }
    //   var temp = []
    //   for(var j in _this.blogonly.commentslist) {
    //     if (_this.blogonly.commentslist[j].last_id === 0) {
    //       temp.push(_this.blogonly.commentslist[j])
    //     }
    //   }
    //   _this.commentslistfirst=temp

    //   for (var i in _this.blogonly.commentslist) {
    //     if(_this.blogonly.commentslist[i].last_id!=0) {
    //       temp = []
    //       for(var j in _this.commentslistfirst){
    //         if(_this.commentslistfirst[j].id===_this.blogonly.commentslist[i].last_id){
    //           temp.push(_this.blogonly.commentslist[i])
    //           _this.commentslistfirst[j].commentsreply=temp
    //         }
    //       }
    //     }
    //   }
    // })
  },

  methods: {
    handleSelect(){

    },
    handleSubmit() {
      if (!this.value) {
        return;
      }

      this.submitting = true;

      setTimeout(() => {
        this.submitting = false;
        this.comments = [
          {
            author: 'Han Solo',
            avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
            content: this.value,
            datetime: moment().fromNow(),
          },
          ...this.comments,
        ];
        this.value = '';
      }, 1000);
    },
     tomanage(){
      if(window.sessionStorage.getItem('token')!=null)
      {
        this.$router.push('/list')
      }
      else if(window.sessionStorage.getItem('admintoken')!=null)
      {
        this.$router.push('/manage')
      }
      else{
        this.$router.push('/login')
      }
      },     
    handleChange(e) {
      this.value = e.target.value;
    },
    search(inputTitle){
      window.sessionStorage.setItem('query',inputTitle)
      this.$router.push('/search')
    },
    tofirstPage(){
      this.$router.push('/home')
    },
    async show(){
      var number = window.sessionStorage.getItem('number')
      const {data:res} = await this.$http.get('http://localhost:8081/blog/showblog',{params:{number:number}})
      this.art=res.data[0]
      if(window.sessionStorage.getItem('author')!=null){
        const {data:res1} = await this.$http.get('http://localhost:8081/blog/selectthumbsup',{params:{number:number,email:window.sessionStorage.getItem('author')}})
        if(res1.code == 200){
          this.color = 'red'
          this.thumbs = '取消点赞'
        }
        else{
           this.color = 'blue'
          this.thumbs = '点赞'
        }
      }
    },
    async thumbs1(color){
      if(window.sessionStorage.getItem('token') == null && window.sessionStorage.getItem('admintoken') == null){
        this.$router.push('/login')
        this.$message.warning('请先进行登陆')
      }
      else{
        if(color == 'blue')
        {
          const {data:res} = await this.$http.get('http://localhost:8081/blog/addThumbsUp',{params:{number:window.sessionStorage.getItem('number')}})
        if(res.code == 200){
          
          const {data:res1} = await this.$http.get('http://localhost:8081/blog/insertthumbsup',{params:{number:window.sessionStorage.getItem('number'),email:window.sessionStorage.getItem('author')}})
          if(res1.code == 200){
          this.$message.success('点赞成功')
          this.color = 'red'
          this.thumbs = '取消点赞'
          }
          else{
             this.$message.error('点赞失败')
          }
        }
        else{
          this.$message.error('点赞失败')
        }
        }
        else if(color == 'red')
        {
           const {data:res} = await this.$http.get('http://localhost:8081/blog/reduceThumbsUp',{params:{number:window.sessionStorage.getItem('number')}})
        if(res.code == 200){
           const {data:res1} = await this.$http.get('http://localhost:8081/blog/deletethumbsup',{params:{number:window.sessionStorage.getItem('number'),email:window.sessionStorage.getItem('author')}})
           if(res1.code == 200){
              this.$message.success('取消成功')
            this.color = 'blue'
            this.thumbs = '点赞'
           }
             else{
          this.$message.error('取消失败')
        }      
        }
        else{
          this.$message.error('取消失败')
        }
        }
      }
    },
    setLast_id(id){
      this.reply_id = id
    },
    replyCommit(commentreply){
      this.commentBlog = this.art.number
      console.log(this.commentreply)
      this.$http.post('http://localhost:8081/type/commitReplyComment', {
        content: this.commentreply, number:window.sessionStorage.getItem('number'),rid:this.reply_id}) .then(function (res) {
        window.location.reload()
      })
    },
      commentPut(comment) {
      this.commentBlog = this.blogonly.number
      console.log(this.commentBlog, this.commentContent)
       this.$http.post('http://localhost:8081/type/commitComment', {
          content: this.commentContent, number: window.sessionStorage.getItem('number')}) .then(function (res) {
          window.location.reload()
        })
    },
  }
};
</script>
<style lang="less" scoped>
.el-main{
  background-color: #FFFFFF;
  width: 900px;
  height: 12000px;
  margin-left: 290PX;
  margin-top: -135px;
}
.el-menu-demo{
  margin-left: -9px;
}
.el-header{
  background-color:#FFFFFF;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  font-size: 20px;
}
.el-aside{
  background-color: #F2F2F2;
  margin-top: 10px;
  margin-left: 20px;
}
.home_pic{
  height: 50px;
  width: 50px;
}
.home_input{
  text-align: right;
  display: flex;
  align-items: center;
}
.div{
  display: flex;
  align-items: center;}
span{
  margin-left: 15px;
}
.el-input__icon{
  display: flex;
  margin-left: -10px;
}
.blog_thing{
  background-color: #F2F2F2;
}
.article-bar-top{
  margin-top: -20px;
  vertical-align: middle;
}
.article-type-img{
  height: 20px;
  width: 20px;
}
.article-read-img{
  height: 20px;
  width: 20px;
  margin-right: -15px;
  margin-left: 15px;
}
.article-collect-img{
  height: 20px;
  width: 20px;
  margin-right: -15px;
  margin-left: 15px;
}
.article-title-box{
  margin-top: -20px;
}
.bar-content{
  margin-left: -40px;
}
.blog_container{
  background-color: #F2F2F2;
  height: 100%;
  width: 100%;
}
.author{
  background-color: #FFFFFF;
}
.author_information{
  display: flex;
}
.author_information{
  margin-top: 10px;
  margin-left: 20px;
}
.blog_aside{
  margin-left: -140px;
  background-color: #FFFFFF;
}
.aside-search{
  margin-top: -5px;
  background-color: #FFFFFF;
}
.author_name{
  margin-left: 90px;
}
.aside-tuijian{
  background-color: #FFFFFF;
  margin-top: 10px;
}
.mask {
  background-color: #000;
  opacity: 0.3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1
}
.pop {
  background-color: #fff;

  position: fixed;
  top: 100px;
  left: 300px;
  width: calc(100% - 600px);
  height:calc(100% - 200px);
  z-index: 2
}
.btn {
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid blue;
  padding: 4px 12px;
}
</style>
